//基本设置
html {
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,q,dl,dt,dd,ol,ul,li,fieldset,form,legend,caption,tbody,tfoot,thead,article,aside,dialog,figure,footer,header,nav,section {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
dialog,
footer,
header,
menu,
nav,
section {
  display: block;
}
ul ul, ol ul {    list-style-type: none ;}
body {
  font-size: 14px;
  color: #333;
  background: #fff;
  font-family: "Microsoft YaHei", "simsun", "Helvetica Neue", Arial, Helvetica, sans-serif;
  height: 100%;
}

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_hqtjudqcu7qtzkt9.eot');
  src: url('//at.alicdn.com/t/font_hqtjudqcu7qtzkt9.eot') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_hqtjudqcu7qtzkt9.woff') format('woff'),
  url('//at.alicdn.com/t/font_hqtjudqcu7qtzkt9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_hqtjudqcu7qtzkt9.svg#iconfont') format('svg');
}
.sh.icon{
  font-family:"iconfont";
  font-size:16px;font-style:normal;
  cursor: pointer;
}

img {
  border: 0;
  vertical-align: bottom;
}

::-webkit-input-placeholder {
  color: #999;
}

:-moz-placeholder {
  color: #999;
}

::-moz-placeholder {
  color: #999;
}

:-ms-input-placeholder {
  color: #ccc;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
}

input:focus,
textarea:focus,
button:focus,
select:focus {
  outline: none;
}

input::-ms-clear {
  display: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
li{ list-style: none}
audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background: transparent;
  text-decoration: none;
  color:#333;
}

a:active,
a:hover {
  outline: 0;
  color: $a-hover;
}

a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  height: 0;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}

legend {
  padding: 0;
  border: 0;
}

optgroup {
  font-weight: bold;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 0;
}

input[type='text'],input[type='password'],input[type='file  '] {
  border: 1px #DDD solid;
  line-height: 25px;
  border-radius: 5px;
  text-align: center;
  font-size: 12px;
  min-width: 160px;
  font-weight: 400;
  color: #000;
}
input[type='checkbox']{
  margin-left: 10px;margin-right: 10px;
}
input:focus,textarea:focus{ border: 1px #F5D5E4 solid; box-shadow: 0 0 5px #CCCCCC;outline:medium;}


select {
  border: 1px #DDD solid;
  height: 26px;
  border-radius: 5px;
  text-align: center;
  min-width: 160px;
  font-size: 12px;
  color: #616161;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}


/*file upload*/
.file {
  position: relative;
  display: inline-block;
  background: #D0EEFF;
  /*padding: 0 20px 0 20px;*/
  overflow: hidden;
  color: #1E88C7;
  text-decoration: none;
  text-indent: 0;
}
.file input {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
}


//Positioning
.sh.relative{ position:relative !important;} .sh.absolute{ position: absolute !important;} .sh.fixed{ position:fixed !important;}
$i: 10;
@while $i > 0 {
  .sh.zIndex#{$i}{ z-index:$i !important;}
  $i: $i - 1;
}
$i: 500;
@while $i > 0 {
  .sh.top#{$i}{top:$i !important;}
  .sh.left#{$i}{left:$i !important;}
  .sh.right#{$i}{right:$i !important;}
  .sh.bottom#{$i}{top:$i !important;}
  $i: $i - 10;
}

//Layout
.sh.none{ display: none !important;} .sh.inline{ display: inline !important;} .sh.block{ display: block !important;} .sh.list-item{ display: list-item !important;} .sh.inline-block{ display: inline-block !important;} .sh.table{ display: table !important;} .sh.inline-table{ display: inline-table !important;}
.sh.table-caption{ display: table-caption !important;} .sh.table-caption{ display: table-caption !important;} .sh.table-cell{ display: table-cell !important;} .sh.table-row{ display: table-row !important;} .sh.table-row-group{ display: table-row-group !important;}
.sh.table-column{ display: table-column !important;} .sh.table-column-group{ display: table-column-group !important;} .sh.table-header-group{ display: table-header-group !important;} .sh.table-footer-group{ display: table-footer-group !important;}
.sh.fRight{ float: right !important;} .sh.fLeft{ float: left !important;}
.sh.cNone{ clear: none  !important;} .sh.cRight{ clear: right !important;} .sh.cLeft{ clear: left !important;} .sh.cBoth{ clear: both !important;}
.sh.vHidden{ visibility: hidden !important;} .sh.vVisible{ visibility: visible !important;}
.sh.oHidden{ overflow: hidden !important;} .sh.oVisible{ overflow: visible !important;} .sh.oScroll{ overflow: scroll !important;} .sh.oAuto{ overflow:auto !important;}
.sh.oxHidden{ overflow-x:hidden !important;} .sh.oxVisible{ overflow-x: visible !important;} .sh.oxScroll{ overflow-x: scroll !important;} .sh.oxAuto{ overflow-x: auto !important;}
.sh.oyHidden{ overflow-y:hidden !important;} .sh.oyVisible{ overflow-y: visible !important;} .sh.oyScroll{ overflow-y: scroll !important;} .sh.oyAuto{ overflow-y: auto !important;}

//Dimension
$i: 500;
@while $i > 0 {
  .sh.h#{$i},.sh.ch#{$i}>*{ height: $i+px} .sh.mh#{$i},.sh.cmh#{$i}>*{ min-height: $i+px}
  .sh.w#{$i}{ width: $i+px !important;}
  $i: $i - 5;
}
.sh.H100,.sh.cH100 > *,.sh.ccH100 > * > *{ height: 100% !important;}
.sh.W100,.sh.cH100 > *,.sh.ccW100 > * > *{ width: 100% !important; }
.sh.hAuto{ height: auto}
.sh.wAuto{ width: auto}
$i: 100;
@while $i > 0 {
  .sh.bh#{$i},.sh.cbh#{$i} > *{ height: $i/100*100%}
  .sh.vh#{$i},.sh.cvh#{$i} > *{ height: $i+vh}
  .sh.lh#{$i},.sh.clh#{$i}>*{ line-height: $i+px}
  .sh.bw#{$i},.sh.cbw#{$i} > *{ width: $i/100*100% }
  .sh.vw#{$i},.sh.cvw#{$i} > *{ width: $i+vw }
  $i: $i - 1;
}

//Margin
$i: 50;
@while $i > 0 {
  .sh.m#{$i},.sh.cm#{$i} > *{ margin: $i+px !important;} .sh.mTop#{$i}{ margin-top:$i+px !important;} .sh.mLeft#{$i}{ margin-Left:$i+px !important;} .sh.mRight#{$i}{ margin-right:$i+px !important;} .sh.mBottom#{$i}{ margin-bottom:$i+px !important;}
  $i: $i - 5;
}
.sh.mAuto{ margin: 0 auto}

//Padding
$i: 50;
@while $i > 0 {
  .sh.p#{$i},.sh.cp#{$i} > *{ padding: $i+px !important;} .sh.pTop#{$i}{ padding-top:$i+px !important;} .sh.pLeft#{$i}{ padding-Left:$i+px !important;} .sh.pRight#{$i}{ padding-right:$i+px !important;} .sh.pBottom#{$i}{ padding-bottom:$i+px !important;}
  $i: $i - 5;
}

//border
.sh.bCCC{ border:1px #CCC solid !important;} .sh.bGray{ border:1px gray solid !important;} .sh.bRed{ border:1px red solid !important;} .sh.bEEE{ border:1px #EEE solid !important;} .sh.bDDD{ border:1px #DDD solid !important;}
.sh.bCCC.dotted{ border-style: dotted !important;} .sh.bCCC.dashed{ border-style:dashed !important;} .sh.bCCC.double{ border-style:double !important;}
.sh.bGray.dotted{ border-style: dotted !important;} .sh.bGray.dashed{ border-style:dashed !important;} .sh.bGray.double{ border-style:double !important;}
.sh.bRed.dotted{ border-style: dotted !important;} .sh.bRed.dashed{ border-style:dashed !important;} .sh.bRed.double{ border-style:double !important;}
.sh.bEEE.dotted{ border-style: dotted !important;} .sh.bEEE.dashed{ border-style:dashed !important;} .sh.bEEE.double{ border-style:double !important;}
.sh.bDDD.dotted{ border-style: dotted !important;} .sh.bDDD.dashed{ border-style:dashed !important;} .sh.bDDD.double{ border-style:double !important;}

//border-bottom
.sh.bbCCC{ border-bottom:1px #CCC solid !important;} .sh.bbGray{ border-bottom:1px gray solid !important;} .sh.bbRed{ border-bottom:1px red solid !important;} .sh.bbEEE{ border-bottom:1px #EEE solid !important;} .sh.bbDDD{ border-bottom:1px #DDD solid !important;}
.sh.bbCCC.dotted{ border-bottom-style: dotted !important;} .sh.bbCCC.dashed{ border-bottom-style:dashed !important;} .sh.bbCCC.double{ border-bottom-style:double !important;}
.sh.bbGray.dotted{ border-bottom-style: dotted !important;} .sh.bbGray.dashed{ border-bottom-style:dashed !important;} .sh.bbGray.double{ border-bottom-style:double !important;}
.sh.bbRed.dotted{ border-bottom-style: dotted !important;} .sh.bbRed.dashed{ border-bottom-style:dashed !important;} .sh.bbRed.double{ border-bottom-style:double !important;}
.sh.bbEEE.dotted{ border-bottom-style: dotted !important;} .sh.bbEEE.dashed{ border-bottom-style:dashed !important;} .sh.bbEEE.double{ border-bottom-style:double !important;}
.sh.bbDDD.dotted{ border-bottom-style: dotted !important;} .sh.bbDDD.dashed{ border-bottom-style:dashed !important;} .sh.bbDDD.double{ border-bottom-style:double !important;}



//Background
.sh.bgRed{ background: red !important;} .sh.bgWhite{ background: white !important;} .sh.bgBlack{ background: black !important;} .sh.bgOrange{ background:orange !important;} .sh.bgGreen{ background: green !important;} .sh.bgBlue{ background: blue !important;}

//Color
.sh.AScGray{ color: gray !important;} .sh.cRed{ color: red !important;} .sh.cWhite{ color: white !important;} .sh.cBlack{ color: black !important;} .sh.cOrange{ color:orange !important;} .sh.cGreen{ color: green !important;} .sh.cBlue{ color: blue !important;}

//font
.sh.fs-normal{ font-style: normal !important;} .sh.fs-italic{ font-style:italic !important;}
.sh.fw-bold{ font-weight: bold !important;}
$i: 30;
@while $i > 0 {
  .sh.fz#{$i}{ font-size: $i+px !important;}
  .sh.mfz#{$i}{ font-size: $i+em !important;}
  .sh.rfz#{$i}{ font-size: $i+rem !important;}
  $i: $i - 2;
}

//Text
.sh.text-capitalize{ text-transform:capitalize !important;} .sh.text-uppercase{ text-transform: uppercase !important;} .text-lowercase{ text-transform: lowercase !important;}
.sh.wPre{ white-space: pre !important;} .sh.wNowrap{ white-space: nowrap !important;} .sh.wPre-wrap{ white-space: pre-wrap !important;} .sh.wPre-line{ white-space: pre-line !important;}
.sh.text-right{ text-align: right !important;} .sh.text-left{ text-align: left !important;} .sh.text-center{ text-align: center !important;} .sh.text-justify{ text-align: justify !important;}
$i: 10;
@while $i > 0 {
  .sh.wSpacing#{#i}{ word-spacing: $i+px !important;}
  .sh.lspacing#{#i}{ letter-spacing: $i+px !important;}
  $i: $i - 1;
}

//Text decoration
.sh.tNone{ text-decoration: none !important;} .sh.tUnderline{ text-decoration: underline !important;} .sh.tOverline{ text-decoration: overline !important;} .sh.tLine-through{ text-decoration: line-through !important;}

//writing Modes
.sh.dLtr{ direction: ltr !important;} .sh.dRtl{ direction: rtl !important;}

//List
.sh.lNone{ list-style: none !important;} .sh.lCircle{ list-style: circle !important;} .sh.lSquare{ list-style:square !important;}

//User Interface
.sh.tClip{ text-overflow: clip !important;} .sh.tEllipsis{ text-overflow: ellipsis !important;}
.sh.outline-no{ outline: none !important;}
.sh.cAuto{ cursor: auto !important;} .sh.cDefault{ cursor: default !important;} .sh.cHelp{ cursor: help !important;} .sh.cPointer{ cursor: pointer !important;} .sh.cProgress{ cursor: progress !important;} .sh.cWait{ cursor: wait !important;}
.sh.cCell{ cursor: cell !important;} .sh.cCrosshair{ cursor: crosshair !important;} .sh.cAlias{ cursor: alias !important;} .sh.cCopy{ cursor: copy !important;} .sh.cMove{ cursor: move !important;} .sh.sNo-allowed{ cursor: not-allowed !important;}
.sh.cE-resize{ cursor: e-resize !important;} .sh.cN-resize{ cursor: n-resize !important;} .sh.cNe-resize{ cursor: ne-resize !important;} .sh.cNw{ cursor: nw-resize !important;} .sh.cS-resize{ cursor: s-resize !important;} .sh.cSe-resize{ cursor: se-resize !important;}
.sh.cSw{ cursor: sw-resize !important;} .sh.cW-resize{ cursor: w-resize !important;} .sh.sEw-resize{ cursor: ew-resize !important;} .sh.cNs-resize{ cursor: ns-resize !important;} .sh.cNesw-resize{ cursor: nesw-resize !important;} .sh.cNwse-resize{ cursor: nesw-resize !important;}
.sh.cCol-resize{ cursor: col-resize !important;} .sh.cRow-resize{ cursor: row-resize !important;} .sh.cAll-resize{ cursor: all-scroll !important;} .sh.cZoom-in{ cursor: zoom-in !important;} .sh.cZoom-out{ cursor: zoom-out !important;}
.sh.bContent-Box{ box-sizing: content-box !important;} .sh.bBorder-box{ box-sizing: border-box !important;}
.sh.rNone{ resize: none !important;} .sh.rBoth{ resize: both !important;} .sh.rHorizontal{ resize: horizontal !important;} .sh.rVertical{ resize: vertical !important;}
.sh.uNone{ user-select: none !important;}
.sh.pNone{ pointer-events: none !important;}

//jc:justify-content
.sh.jc-start{ justify-content: flex-start !important;}
.sh.jc-end{ justify-content: flex-end !important;}
.sh.jc-center{ justify-content: center !important;}
.sh.jc-space-between{ justify-content: space-between !important;}
.sh.jc-space-around{ justify-content: space-around !important;}

//ai:align-items
.sh.ai-start{ align-items: flex-start !important;}
.sh.ai-end{ align-items: flex-end !important;}
.sh.ai-center{ align-items: center !important;}
.sh.ai-baseline{ align-items: baseline !important;}
.sh.ai-stretch{ align-items: stretch !important;}

//fd:flex-direction
.sh.fd-row{ flex-direction: row !important;}
.sh.fd-column{ flex-direction: column !important;}
.sh.fd-row-reverse{ flex-direction: row-reverse !important;}
.sh.fd-column-reverse{ flex-direction: column-reverse !important;}

//fw:flex-wrap
.sh.fw-nowrap{ flex-wrap: nowrap !important;}
.sh.fw-wrap{ flex-wrap:wrap !important;}
.sh.fw-wrap-reverse{ flex-wrap:wrap-reverse !important;}

//top center bottom
.sh.vCenter,.sh.vBottom,.sh.vTop{
  width: 100%;display: table;
  > *{ display:table-row !important;
    > *{ display: table-cell !important;}
  }
}
.sh.vTop{ > * > *{ vertical-align:top !important;} }
.sh.vCenter{ > * > *{  vertical-align:middle !important;} }
.sh.vBottom{ > * > *{ vertical-align:bottom !important;} }

img{ width: 100%;height: 100%}

//box-shadow
.sh.box-shadow-none{ box-shadow: 0 0 0 rgba(0,0,0,0.2) !important;}
.sh.box-shadow-small{ box-shadow: 1px 3px 5px rgba(0,0,0,0.2) !important;}
.sh.box-shadow{ box-shadow: 1px 3px 9px rgba(0,0,0,0.1) !important;}
.sh.box-shadow-big{ box-shadow: 1px 6px 9px rgba(0,0,0,0.1) !important;}


//column* border
$i: 16;
@while $i > 0 {
  .sh.column#{$i}.border{
    >.sh.column{
      > .item{ border: 1px #CCC solid;  border-right: 0;  }
      &:last-child{
        .item{ border-right: 1px #CCC solid;  }
      }
    }
  }
  $i: $i - 1;
}

//row border
.sh.row.border{
  border:0 !important;  width: calc( 100% + 1px );
  > *{ border:1px #CCC solid;  border-bottom: 0;
    &:last-child{  border-bottom: 1px #CCC solid;  }
  }
}









































